import React, { memo } from "react";
import { contentEmoji } from "@/utils/format-utils";

export default memo(function CommentSpanComponents(props) {
  return (
    <span>
      {props.content.split("\n").length > 1
        ? props.content.split("\n").map((itemb, indexb) => {
            return (
              <React.Fragment key={indexb + Math.random()}>
                {contentEmoji(itemb).split("_!").length === 1
                  ? contentEmoji(itemb).split("_!")[0]
                  : contentEmoji(itemb)
                      .split("_!")
                      .map((itemc, indexc) => {
                        return itemc.indexOf("s1.music.126.net") === -1 ? (
                          itemc
                        ) : itemc.indexOf(",") !== -1 ? (
                          ""
                        ) : (
                          <React.Fragment key={indexc + Math.random()}>
                            <img
                              src={itemc.slice(0, itemc.indexOf(".png") + 4)}
                              alt=""
                            />{" "}
                            <span>
                              {itemc.slice(itemc.indexOf(".png") + 4)}
                            </span>
                          </React.Fragment>
                        );
                      })}
                <br />
              </React.Fragment>
            );
          })
        : contentEmoji(props.content).split("_!").length === 1
        ? contentEmoji(props.content).split("_!")[0]
        : contentEmoji(props.content)
            .split("_!")
            .map((itemc, indexc) => {
              return itemc.indexOf("s1.music.126.net") === -1 ? (
                itemc
              ) : itemc.indexOf(",") !== -1 ? (
                ""
              ) : (
                <React.Fragment key={indexc + Math.random()}>
                  <img src={itemc.slice(0, itemc.indexOf(".png") + 4)} alt="" />{" "}
                  <span>{itemc.slice(itemc.indexOf(".png") + 4)}</span>{" "}
                </React.Fragment>
              );
            })}
    </span>
  );
});
